<template>
	<view>
		<view class="mechanism-head">
			<image class="mechanism-head-icon" :src="mechanism.store_logo" mode=""></image>
			<view class="mechanism-head-nickname">
				{{mechanism.name}}
			</view>
			<view class="mechanism-head-btn" v-if="!mechanism.is_collect" @click="follow()">关注</view>
			<view class="mechanism-head-nobtn" v-if="mechanism.is_collect" @click="follow()">已关注</view>
			<view class="mechanism-head-introduce" v-if="mechanism.store_introduction != 'null'">
				{{mechanism.store_introduction | getStr(65)}}
			</view>
			<view class="mechanism-head-introduce" v-if="mechanism.store_introduction == 'null'">
				
			</view>
			<button class="release-btn" style="color: #ffffff;" type="default" @click="wechatOpen">联系老师</button>
		</view>
		<view style="height: 1upx; background: #F3F3F3; margin: 0upx 30upx 30upx 30upx;"></view>
		<!-- 地址导航 -->
		<!-- v-for="item in mechanism.address" -->
		<scroll-view scroll-y="true" style="height: 180upx;">
			<view class="mechanism-nav" v-for="(item,index) in long_lati" :key="index">
				<image :src="imglink + 'recommend/location_Hui.svg'" class="mechanism-nav-img"></image>
				<view class="mechanism-nav-addr">
					{{ item.long_lati_local | getStr(18)}}
				</view>
				<view class="mechanism-nav-btn" @click="getNavigation(item)">
					导航
				</view>
			</view>
		</scroll-view>
		<view style="height: 20upx; margin-top: 30upx; background: #F3F3F3;"></view>
		
		<view class="mechanism-column">
			<view class="group-state-contain">
				<view :class="groupStatusIndex == index?'group-state-active':''" 
				v-for="(item,index) in mechanismColumn" 
				:key='index' 
				data-index="index" 
				@click="changeIndex(index)">
					{{item}}
					<view v-if="index==0" style="display: inline-block;margin-left: 10upx;">
						({{ videoNum.length }})
					</view>
					<view v-if="index==1" style="display: inline-block;margin-left: 10upx;">
						({{ mechanism.activity.length }})
					</view>
				</view>
			</view>
		</view>
		<!-- 作品 -->
		<view class="mechanism-content" v-if="groupStatusIndex == 0">
			<!--  v-if="item.status == 1" -->
			<view class="mechanism-content-workscard" v-for="(item,index) in mechanism.video" :key="index" @click="jumpVideo(item,index)" v-if="item.status == 1">
				<!-- <view class="mechanism-content-workscard-label" v-if="item.status == 0">审核中</view>
				<view class="mechanism-content-workscard-label-yes" v-if="item.status == 1">已通过</view>
				<view class="mechanism-content-workscard-label-no" v-if="item.status == 2">未通过</view> -->
				<image class="mechanism-content-workscard-img" :src="item.head_img" mode=""></image>
				<view class="">
					<image class="mechanism-content-workscard-icon" :src="mechanism.store_logo" mode=""></image>
					<view class="mechanism-content-workscard-nick">
						{{ mechanism.name }}
					</view>
				</view>
				<view class="" style="text-align: right; position: relative; height: 70upx;">
					<view class="mechanism-content-workscard-subject">
						{{ item.subjects_name }}
					</view>
					<image class="mechanism-content-workscard-location" v-if="item.distance" :src="imglink + 'recommend/location_Hui.svg'" mode=""></image>
					<view class="mechanism-content-workscard-distance" v-if="item.distance">
						{{ item.distance | getdec() }}
					</view>
				</view>
			</view>
		</view>
		<!-- 精选好课 -->
		<view class="mechanism-content" v-if="groupStatusIndex == 1" style="padding: 0 30upx;">
			<view class="mechanism-content-card" v-for="(item,index) in mechanism.activity" :key="index" @click="enterDetails(item.activity_id)">
				<image class="mechanism-content-card-img" :src="item.image[0] || item.image" mode="widthFix"></image>
				<view class="mechanism-content-card-title">
					{{ item.name }}
				</view>
			</view>
		</view>
		<!-- 机构介绍 -->
		<view class="mechanism-content" v-if="groupStatusIndex == 2" style="font-size: 32upx; margin: 0 30upx;">
			<image :src="mechanism.store_logo" mode="" class="mechanism-content-txt-icon" ></image>
			<view class="mechanism-content-txt">
				店铺名称：{{ mechanism.name }}
			</view>
			<view class="mechanism-content-txt">
				所在地区：{{ mechanism.local.province }}-{{ mechanism.local.city }}-{{ mechanism.local.country }}
			</view>
			<view class="mechanism-content-txt">
				详细地址：{{ mechanism.address}}
			</view>
			<view class="mechanism-content-txt">
				培训科目：
				<view class="" v-for="(item,index) in mechanism.subjects_name" :key="index" style="display: inline-block; margin: 0 5upx;">
					{{ item }}
					<view style="display: inline-block;" class="" v-if="index != mechanism.subjects_name.length-1">
						、
					</view>
				</view>
			</view>
			<image class="mechanism-content-txt-img" :src="mechanism.store_img" mode="widthFix"></image>
			<view class="mechanism-content-txt" v-if="mechanism.store_introduction != 'null'">
				机构介绍：{{ mechanism.store_introduction }}
			</view>
			<view class="mechanism-content-txt" v-if="mechanism.store_introduction == 'null'">
				机构介绍：无
			</view>
		</view>
		
		<!-- 联系老师 -->
		<uni-popup ref="wechat" type="center" >
			<view class="we-chat">
				<!-- 关闭按钮 -->
				<image class="we-chat-close-btn" :src="imglink + 'recommend/close.svg'" mode="" @click="wechatClose"></image>
				<view class="" style="color: #FF8B46;">
					长按保存老师二维码 扫一扫添加老师微信
				</view>
				<image class="we-chat-img" :src="mechanism.call_teacher.wechat_qrcode" mode="" bindlongpress="savepicture" :show-menu-by-longpress="true"></image>
				<view class="wechat-number">
					老师微信号：{{ mechanism.call_teacher.wechat_number }}
					<view class="wechat-number-btn" @click="copyData(mechanism.call_teacher.wechat_number)">
						复制
					</view>
				</view>
				<view class="wechat-number">
					老师电话：{{ mechanism.call_teacher.telephone }}
					<view class="wechat-number-btn" @click="callPhone(mechanism.call_teacher.telephone)">
						拨打
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	 // #ifdef H5
		import h5Copy from '@/js_sdk/junyi-h5-copy/junyi-h5-copy/junyi-h5-copy.js'
	// #endif
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	export default {
		data() {
			return {
				store_id:'',
				mechanism:[],
				groupStatusIndex:0,
				mechanismColumn:[
					'作品',
					'精选好课',
					'机构介绍'
				],
				videoNum:[],
				foll:'',
				latitude:'',
				longitude:'',
				long_lati:[],
				distance:'',
				dingwei:'',
				imglink: this.$store.state.imgLink,
			}
		},
		filters: {
			getdec(distance){
				if(distance < 1000){
					console.log(distance+"米");
					return distance.toFixed(0) + 'm'
				}
				else if(distance > 1000){
					console.log((Math.round(distance/100)/10).toFixed(1) + "公里")
					return (Math.round(distance/100)/10).toFixed(1) + "km"
				}
			},
			getStr(str, new_length) {
			// console.log('getStr', str);
				if (!str) {
					return ''
				}
				if (str.length > new_length) {
					return str.slice(0, new_length) + '...'
				} else {
					return str
				}
			},
		},
		onLoad(options) {
			let id = parseInt(options.store_id,10);
			console.log('进入了onload 获取url的store_id',id)
			this.store_id = id
			this.dingwei = uni.getStorageSync('dingwei')
			this.addUserStore()
			var that = this
			wx.getLocation({
				type: 'gcj02',
				isHighAccuracy: true,
				success: function (res) {
					console.log(res)
					console.log('当前位置的经度：' + res.longitude);
					console.log('当前位置的纬度：' + res.latitude);
					
					that.longitude = res.longitude;
					that.latitude = res.latitude;
					let dizhi = []
					dizhi.push(res.latitude,res.longitude)
					that.dingwei = dizhi
				},
				fail(res) {
					console.log(res,'接口调用失败');
					uni.showToast({
						title:'定位失败!',
						icon:'none',
						duration:1000,
					})
				}
			});
			this.getMechanism()
		},
		methods: {
			addUserStore(){
				let data = {
					token:this.$store.getters.getToken,
					store_id: this.store_id,
					// #ifdef H5
						type:2
					// #endif
					// #ifdef MP-WEIXIN
						type:1
					// #endif
				}
				console.log("add_user_store",data);
				// 3.发送请求
				this.$api.add_user_store(data).then(res => {
					console.log("add_user_store",res);
					if(res.status){
						
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none',
							duration:2000
						})
					}
				}).catch(err =>{
					console.log(err)
				})
			},
			// #ifdef MP-WEIXIN
				// 保存图片
				savepicture(){
					let that = this
					uni.authorize({
						scope: 'scope.writePhotosAlbum',
						success() {
							console.log(that.mechanism.call_teacher.wechat_qrcode);
							uni.showModal({
								title: '提示',
								content: '确定保存到相册吗',
								success: function (res) {
									if (res.confirm) {
										uni.downloadFile({
											url: that.mechanism.call_teacher.wechat_qrcode,//图片地址
											success: (res) =>{
												if (res.statusCode === 200){
													uni.saveImageToPhotosAlbum({
														filePath: res.tempFilePath,
														success: function() {
															uni.showToast({
																title: "保存成功",
																icon: "none"
															});
														},
														fail: function() {
															uni.showToast({
																title: "保存失败",
																icon: "none"
															});
														}
													});
												} 
											}
										})
									} else if (res.cancel) {
										
									}
								}
							});
						},
						fail() {
							uni.showModal({
								content: '拒绝授权相册权限后无法成功保存海报，是否重新授权？',
								confirmColor: '#00A66A',
								success: function (res) {
									if (res.confirm) {
										uni.openSetting({
											success(res) {
												console.log(res.authSetting)
											}
										});
									} else if (res.cancel) {
										
									}
								}
							})
						}
					})
				},
			// #endif
			// 关注
			follow(){
				let data = {
					token:this.$store.getters.getToken,
					store_id:this.store_id,
				}
				this.$api.set_follow(data).then(res => {
					console.log(res,"545454");
					if(res.status){
						this.getMechanism()
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none',
							duration:2000
						})
					}
				}).catch(err =>{
					console.log(err)
				})
			},
			// 老师微信打开
			wechatOpen(){
				this.$refs.wechat.open()
			},
			// 老师微信关闭
			wechatClose(){
				this.$refs.wechat.close()
			},
			// 导航
			getNavigation(jingweidu){
				let that = this
				let long_lati = jingweidu.long_lati.split(",")
				wx.openLocation({
					latitude:Number(long_lati[0]),
					longitude:Number(long_lati[1]),
					name: jingweidu.long_lati_local,
					success: function (res) {
						
					},
					fail(res) {
						console.log(res,'接口调用失败');
						uni.showToast({
							title:'打开地图失败!',
							icon:'none',
							duration:1000,
						})
					}
				});
			},
			changeIndex(index){
				this.groupStatusIndex = index
			},
			// 拨打
			callPhone(telephone) {
				uni.makePhoneCall({
					phoneNumber: telephone,
					success(res) {
						console.log(res)
					},
					fail(err) {
						console.log(err)
					}
				})
			},
			// #ifdef H5
			// 复制
				copyData(copyText) {
					console.log('点击了复制');
					let content = copyText // 复制内容，必须字符串，数字需要转换为字符串
					const result = h5Copy(content)
					if (result === false) {
						uni.showToast({
							title: '不支持',
						})
					} else {
						uni.showToast({
							title: '复制成功',
							icon: 'none'
						})
					}
				},
			// #endif
			// #ifdef MP-WEIXIN
				copyData(wechatNumber) {
					uni.setClipboardData({
						data: wechatNumber,
						success: function (res) {
							uni.getClipboardData({
								success: function (res) {
									console.log(res.data) // data
								}
							})
						}
					})
				},
			// #endif
			// 设置机构详情线索用户
			getUser(){
				let data = {
					token:this.$store.getters.getToken,
					store_id:this.store_id,
				}
				console.log("8888888",data);
				// 3.发送请求
				this.$api.get_store_user(data).then(res => {
					console.log(res,"545454");
					if(res.status){
						
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none',
							duration:2000
						})
					}
				}).catch(err =>{
					console.log(err)
				})
			},
			// 获取机构详情
			getMechanism(){
				let data = {
					token:this.$store.getters.getToken,
					long_lati: this.dingwei,
					store_id:this.store_id,
				}
				console.log("8888888",data);
				// 3.发送请求
				this.$api.get_mechanism(data).then(res => {
					console.log(res,"545454");
					if(res.status){
						this.mechanism = res.data
						console.log(this.mechanism,'机构详情')
						this.videoNum = this.mechanism.video
						
						this.long_lati = this.mechanism.long_lati
						// this.long_lati = this.mechanism.long_lati.split(",")
						console.log(this.long_lati,"++++++++++++++++++++++++++++++++++++++++");
						
						// this.videoNum = this.mechanism.video.filter(item => item.status == 1)
						this.getUser()
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none',
							duration:2000
						})
					}
				}).catch(err =>{
					console.log(err)
				})
			},
			// 跳转视频详情页
			jumpVideo(item,index){
				if(item.status == 1){
				// 	let data = {
				// 		token:this.$store.getters.getToken,
				// 		store_id: this.mechanism.customer_store_id,
				// 		video_id: item.id
				// 	}
				// 	console.log("8888888");
				// 	// 3.发送请求
				// 	this.$api.add_viderUser(data).then(res => {
				// 		if(res.status){
							uni.setStorageSync('showVideoList', this.mechanism.video)
							uni.navigateTo({
								url: '/pages/recommend/specific/videoshow?id=' + item.id + '&store_id=' + this.mechanism.customer_store_id + '&state=1&index=' + index
							})
				// 		}else{
				// 			uni.showToast({
				// 				title:res.msg,
				// 				icon:'none',
				// 				duration:2000
				// 			})
				// 		}
				// 	}).catch(err =>{
				// 		console.log(err)
				// 	})
				}
			},
			// 跳转课程
			enterDetails(activity_id) {
				let data = {
					token:this.$store.getters.getToken,
					store_id:this.mechanism.customer_store_id,
					activity_id:activity_id
				}
				console.log("8888888");
				// 3.发送请求
				this.$api.add_activityUser(data).then(res => {
					if(res.status){
						uni.navigateTo({
							url: '/pages/home/organization/activeDetail-3?page=details&actId=' + activity_id + '&store_id=' + this.mechanism.customer_store_id
						})
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none',
							duration:2000
						})
					}
				}).catch(err =>{
					console.log(err)
				})
			},
		}
	}
</script>

<style>
	.mechanism-head{
		padding: 50upx;
	}
	.mechanism-head-icon{
		display: inline-block;
		width: 124upx;
		height: 124upx;
		margin-right: 32upx;
		border-radius: 80upx;
		vertical-align: middle;
	}
	.mechanism-head-nickname{
		display: inline-block;
		width: 356upx;
		font-size: 32upx;
		color: rgba(0,0,0,0.85);
		font-weight: bold;
		vertical-align: middle;
	}
	.mechanism-head-btn{
		display: inline-block;
		position: absolute;
		right: 50upx;
		width: 100upx;
		height: 48upx;
		color: #FF674E;
		font-size: 26upx;
		margin-top: 30upx;
		line-height: 46upx;
		text-align: center;
		border-radius: 30upx;
		border: 1upx solid #FF674E;
	}
	.mechanism-head-nobtn{
		display: inline-block;
		position: absolute;
		right: 50upx;
		width: 100upx;
		height: 48upx;
		color: #b6b6b6;
		font-weight: bold;
		font-size: 26upx;
		margin-top: 30upx;
		line-height: 46upx;
		text-align: center;
		border-radius: 30upx;
		border: 1upx solid #dadada;
	}
	.mechanism-head-introduce{
		margin-top: 40upx;
		font-size: 28upx;
		font-weight: bold;
		color: rgba(0,0,0,0.85);
	}
	.release-btn{
		width: 480upx;
		margin-top: 40upx;
		line-height: 80upx;
		font-size: 28upx;
		border-radius: 15upx;
		color: #ffffff;
		background-image: linear-gradient(90deg, #FE9543 14%, #FF664F 100%);
		border-radius: 60upx;
	}
	/* 微信 */
	.we-chat{
		width: 670upx;
		padding: 44upx 0;
		font-size: 32upx;
		z-index: 999;
		text-align: center;
		border-radius: 20upx;
		background-color: #ffffff;
	}
	.we-chat-img{
		width: 610upx;
		height: 55vh;
		margin-top: 36upx;
	}
	.wechat-number{
		margin-top: 54upx;
		margin-left: 50upx;
		text-align: left;
	}
	.wechat-number-btn{
		position: absolute;
		right: 50upx;
		width: 140upx;
		padding: 5upx 0;
		text-align: center;
		font-size: 26upx;
		color: #ffffff;
		border-radius: 30upx;
		display: inline-block;
		background-image: linear-gradient(90deg, #FE9543 14%, #FF664F 100%);
	}
	.we-chat-close-btn{
		position: absolute;
		margin-top: -120upx;
		right: 0upx;
		width: 48upx;
		height: 48upx;
		z-index: 999;
	}
	.mechanism-nav{
		margin: 10upx 30upx;
	}
	.mechanism-nav-img{
		display: inline-block;
		width: 40upx;
		height: 40upx;
		margin-right: 10upx;
		vertical-align: middle;
	}
	.mechanism-nav-addr{
		display: inline-block;
		font-size: 26upx;
		color: rgba(0,0,0,0.85);
		vertical-align: middle;
	}
	.mechanism-nav-btn{
		display: inline-block;
		position: absolute;
		right: 30upx;
		font-size: 26upx;
		color: #55A0F0;
		margin-top: 8upx;
	}
	.mechanism-column{
		padding: 30upx;
		padding-bottom: 20upx;
	}
	.group-state-contain{
		width: 690upx;
		height: 64upx;
		line-height: 64upx;
		display: flex;
		padding-bottom: 20upx;
		border-bottom: 1upx solid #E6E6E6;
	}
	.group-state-contain>view{
		width: 50%;
		text-align: center;
		font-size: 30upx;
	}
	.group-state-contain .group-state-active{
		color: #FF674E;
		height: 80upx;
		border-bottom: 4upx solid #FF674E;
	}
	.mechanism-content{
		margin-bottom: 60upx;
	}
	.mechanism-content-card{
		border: 1upx solid #E6E6E6;
		box-shadow: 0 10upx 20upx 0 rgba(0,0,0,0.05);
		border-radius: 16upx;
		margin-bottom: 30upx;
	}
	.mechanism-content-card-img{
		width: 100%;
		border-radius: 16upx 16upx 0 0;
	}
	.mechanism-content-card-title{
		font-size: 34upx;
		font-weight: bold;
		padding: 22upx 30upx 30upx 30upx;
		color: rgba(0,0,0,0.85);
	}
	
	.mechanism-content-workscard{
		display: inline-block; 
		margin-top: 26upx;
		margin-left: 30upx;
		width: 330upx;
		border-radius: 8upx;
		box-shadow: 0 4upx 18upx 0 rgba(0,0,0,0.13);
		vertical-align: middle;
	}
	.mechanism-content-workscard-img{
		width: 100%; 
		height: 360upx;
		text-align: center;
	}
	.mechanism-content-workscard-icon{
		display: inline-block;
		width: 50upx;
		height: 50upx;
		margin-left: 20upx;
		border-radius: 80upx;
		vertical-align: middle;
	}
	.mechanism-content-workscard-nick{
		display: inline-block;
		margin-left: 15upx;
		font-size: 28upx;
		vertical-align: middle;
	}
	.mechanism-content-workscard-subject{
		position: absolute;
		display: inline-block;
		left: 0upx;
		width: 80upx;
		text-align: center;
		font-size: 26upx;
		margin: 20upx 0 20upx 20upx;
		color: #FF674E;
		border: 1upx solid #FF674E;
		border-radius: 30upx;
		vertical-align: middle;
	}
	.mechanism-content-workscard-location{
		width: 40upx;
		height: 40upx;
		margin-top: 18upx;
		vertical-align: middle;
	}
	.mechanism-content-workscard-distance{
		display: inline-block;
		font-size: 26upx;
		margin-top: 18upx;
		margin-right: 20upx;
		vertical-align: middle;
	}
	.mechanism-content-txt{
		margin: 20upx 0;
	}
	.mechanism-content-txt-img{
		width: 100%;
	}
	.mechanism-content-txt-icon{
		position: absolute;
		right: 50upx;
		width: 130upx;
		height: 130upx;
		border-radius: 100upx;
	}
	.mechanism-content-workscard-label{
		position: absolute;
		font-size: 28upx;
		color: #ffffff;
		margin-top: 20upx;
		padding: 5upx 15upx;
		z-index: 99;
		background-size: 100% 100%;
		background-image: url(https://tool.tuanhaoke.cn/static/image/member/activity-collection-code.png);
	}
	.mechanism-content-workscard-label-yes{
		position: absolute;
		font-size: 28upx;
		color: #ffffff;
		margin-top: 20upx;
		padding: 5upx 15upx;
		z-index: 99;
		border-radius: 0upx 30upx 30upx 0upx;
		background-color: #1CB419;
	}
	.mechanism-content-workscard-label-no{
		position: absolute;
		font-size: 28upx;
		color: #ffffff;
		margin-top: 20upx;
		padding: 5upx 15upx;
		z-index: 99;
		border-radius: 0upx 30upx 30upx 0upx;
		background-color: #ff0000;
	}
</style>
